<template>
    <div class='test-page'>
        <div class="img">
            <img class="imgBack" :src="imgList[showImg].imageUrl" alt="">
            <p class="left" @click="changeImg(showImg - 1)">&lt;</p>
            <div class="list">
                <img class="imgList" :src="imgList && imgList[showImg].imageUrl" alt="">
                <ul>
                    <li v-for='item in imgList' :key='item.id' :class="[item.id === showImg ? 'on' : '']"
                        @click="changeImg(item.id)"></li>
                </ul>
                <div class="down">
                    <img :src=downImg alt="">
                    <a href="#/download"></a>
                </div>
            </div>
            <p class="right" @click="changeImg(showImg + 1)">&gt;</p>
        </div>
        <div class="test-content">
            <div class="test-heard">
                <div class="theard-left">
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '全部' }
                    }">
                        <h1>热门推荐</h1>
                    </router-link>
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '华语' }
                    }">
                        <p>华语</p>
                    </router-link>|
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '流行' }
                    }">
                        <p>流行</p>
                    </router-link>|
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '摇滚' }
                    }">
                        <p>摇滚</p>
                    </router-link>|
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '民谣' }
                    }">
                        <p>民谣</p>
                    </router-link>|
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '电子' }
                    }">
                        <p>电子</p>
                    </router-link>
                </div>
                <div class="greater">
                    <router-link :to="{
                        path: '/find/song-list',
                        query: { data: '全部' }
                    }">
                        <p>更多</p>
                    </router-link>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'test-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: "Test page",
            //http://123.207.219.13:3003/banner
            showImg: 0,
            downImg: 'https://s2.music.126.net/style/web2/img/index/download.png?4c113686ceff3982b4546d308e9fc87f',
            imgList: [
                {
                    id: 0,
                    imageUrl: ''
                }
            ],
        }
    },
    methods: {
        changeImg(index) {
            // console.log('index', index);
            clearInterval(this.timer); // 停止定时器
            let tindex = (index + this.imgList.length) % this.imgList.length;
            this.showImg = this.imgList[tindex].id;
            this.timer = setInterval(() => {
                this.showImg = this.showImg + 1
                this.changeImg(this.showImg)
            }, 5000);
        }
    },
    // 在Vue组件的生命周期钩子函数中使用setInterval
    created() {
        this.$http.get('/api/banner').then(res => {
            if (res.status === 200) {
                // console.log('请求获取数据：', res.data.banners);
                this.imgList = res.data.banners
                let i = 0;
                for (let s of this.imgList) {
                    s.id = i++
                    console.log('s', s);
                }
                // console.log('data:', this.imgList);
            }
        }).catch(error => {
            console.log('There was an error fetching the banner data:', error);
        });

        this.timer = setInterval(() => {
            this.showImg = this.showImg + 1
            console.log('定时器执行', this.showImg);
            this.changeImg(this.showImg)
        }, 5000);
    },
    beforeDestroy() {
        if (this.timmer) {
            clearInterval(this.timer); // 销毁组件前清除定时器
        }
    },
}
</script>

<style scoped>
.img {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.imgBack {
    width: 100%;
    filter: blur(5px);
    transform: scale(10);
}

.list {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 1077px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    /* background: #000; */
}

ul {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 300px;
}

li {
    padding: 2px;
    border-radius: 50%;
    background: #fff;
    margin: 0 10px;
}

li.on {
    background: red;
    box-shadow: 0 1px 2px rgba(255, 0, 0);
}

.imgList {
    height: 100%;
}

.down {
    width: 300px;
    height: 100%;
    /* background: #924e4e; */
}

.down img {
    width: 100%;
    object-fit: contain;
    object-position: center top;
}

.down a {
    height: 68px;
    width: 255px;
    position: absolute;
    bottom: 15px;
    right: 209px;
    border-radius: 5px;
    /* background: #924e4e; */
}

.img p {
    width: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    position: absolute;
    /* background: #000; */
    top: 0;
    bottom: 0;
    margin: auto 30px;
}

p:hover {
    background: rgba(122, 122, 122, 0.5);
}

p.left {
    left: 110px;
}

p.right {
    right: 110px;
}

.test-content {
    width: 1077px;
    height: 400px;
    display: flex;
    justify-content: space-between;
    /* background: #c3edf0; */
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    border: #d3d3d3 solid 1px;
}

.test-heard {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e3e3e3;
    /* background: #924e4e; */
    border-bottom: 2px solid #c10d0c;
}

.test-heard h1 {
    padding: 10px 10px 10px 25px;
    color: #000;
    background-image: url('https://s2.music.126.net/style/web2/img/index/index.png?3bad130302be24ca66541108ec220e61');
    background-repeat: no-repeat;
    background-position: -230px -148px;
}

.test-heard p {
    padding: 10px;
    color: #9d9d9d
}

.test-heard p:hover {
    background: none;
    text-decoration: underline;
}

.theard-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.greater {
    /* display: inline-block; */
    padding-right: 5px;
    background-image: url('https://s2.music.126.net/style/web2/img/index/index.png?3bad130302be24ca66541108ec220e61');
    background-repeat: no-repeat;
    background-position: 35px -229px;
}
</style>